<div>
    <div class="row">
        <div class="col-md-5">
            <utk-piechart chart-data="data" chart-width="{{chart.width}}" chart-height="{{chart.height}}" chart-margin="{{chart.margin}}"
                chart-donuts="{{chart.donuts}}" chart-legend="{{chart.legend}}" chart-show-tip="{{chart.showTip}}" chart-tip-text="tipText(tip)">
                <div class="chart_tip">
                </div>
            </utk-piechart>
        </div>
        <div class="col-md-7">
            <table class="table">
                <thead>
                    <tr>
                        <th>Property</th>
                        <th>Value</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Data:</td>
                        <td><utk-button btn-text="Generate" btn-size="xsmall" ng-click="generate()"></utk-button></td>
                    </tr>
                    <tr>
                        <td>Size:</td>
                        <td>Width: <input type="text" ng-model="chart.width"></input> Height: <input type="text" ng-model="chart.height"></input> Margin: <input type="text" ng-model="chart.margin"></input></td>
                    </tr>
                    <tr>
                        <td>Show Tip Text:</td>
                        <td><utk-checkbox chk-text="Show Tip" ng-model="chart.showTip"></utk-checkbox></td>
                    </tr>
                    <tr>
                        <td>Draw Legend:</td>
                        <td><utk-checkbox chk-text="Legend" ng-model="chart.legend"></utk-checkbox></td>
                    </tr>
                    <tr>
                        <td>Donuts:</td>
                        <td><utk-checkbox chk-text="Donuts" ng-model="chart.donuts"></utk-checkbox></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <h3>Syntax:</h3>
    <utk-tab-set>
        <utk-tab tab-header="HTML">
            <utk-code cd-lang="html" class="selectable">&lt;utk-piechart chart-data="data" 
    chart-colors="colors" 
    chart-width="{{chart.width}}" 
    chart-height="{{chart.height}}"
    chart-margin="{{chart.margin}}"
    chart-donuts="{{chart.donuts}}"
    chart-legend="{{chart.legend}}"
    chart-show-tip="{{chart.showTip}}"
    chart-tip-text="tipText(tip)"
    chart-click="click(data, index)"&gt;
    &lt;div class="chart_tip"&gt;&lt;/div&gt;
&lt;/utk-piechart&gt;</utk-code>
        </utk-tab>
        <utk-tab tab-header="JavaScript">
            <utk-code cd-lang="js" class="selectable">function Ctrl($scope) {
    $scope.data = { "IE": 44, "Chrome": 40, "Firefox": 20, "Opera": 3, "Safari": 2, "Other": 1};
    
    $scope.tipText = function(e, d, i){
        tip.element.text(tip.data.key + ': ' + tip.data.value + ' (' + tip.data.percent + ')');
    };
    
    //$scope.colors = [['#F9A006', '#D97E00'], ... ];
    //Other code...
}</utk-code>
        </utk-tab>
    </utk-tab-set>
</div>

